<template>
  <div class="coin-select">
    <div class="label fs-container">
      <span>{{ label }}</span>
      <span v-if="balance && !balance.wei.isNaN()"> Balance: {{ balance.fixed() }} </span>
      <span v-else-if="isDemo"> Balance: 100.00 </span>
    </div>
    <div class="coin-input fs-container">
      <input
        :value="value"
        inputmode="decimal"
        autocomplete="off"
        autocorrect="off"
        placeholder="0.00"
        type="text"
        pattern="^[0-9]*[.,]?[0-9]*$"
        minlength="1"
        maxlength="79"
        spellcheck="false"
        :disabled="disabled"
        @input="$emit('onInput', $event.target.value)"
        @focus="$emit('onFocus')"
      />
      <button
        v-if="showMax && balance && (!value || lt(value, balance.toEther()))"
        class="max-button"
        @click="$emit('onMax')"
      >
        MAX
      </button>
      <button class="select-button fc-container" @click="$emit('onSelect')">
        <div v-if="coinName" class="fc-container">
          <img :src="importIcon(`/coins/${coinName.toLowerCase()}.png`)" />
          <span class="select-text">{{ coinName }}</span>
          <img src="@/assets/icons/select.png" />
        </div>
        <span v-else class="select-token">Select a token <img src="@/assets/icons/w-down.png" /></span>
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Icon } from 'ant-design-vue'

import importIcon from '@/utils/import-icon'
import { lt } from '@/utils/safe-math'

export default Vue.extend({
  components: {
    Icon
  },

  model: {
    prop: 'value',
    event: 'onInput'
  },

  props: {
    isDemo: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: 'From'
    },
    coinName: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    balance: {
      type: Object,
      default: null
    },
    showMax: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    importIcon,
    lt
  }
})
</script>

<style lang="less" scoped>
@import '../styles/variables';

.coin-select {
  background: #fff;
  border-radius: 18px;
  border: 1px solid @gray-color;
  padding: 10px 0;
  .select-text {
    font-size: 24px;
    color: @p-color;
    margin: 0 12px;
  }
  .label {
    padding: 0.75rem 1rem 0;
    font-size: 12px;
    line-height: 14px;
    color: rgb(133, 133, 141);
    margin-bottom: 10px;
    span {
      color: @p-color;
      font-weight: bold;
      font-size: 18px;
    }
  }

  input {
    width: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 30px;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: @fre-font;
    &::placeholder {
      color: fade(@p-color, 40);
    }
    &:active,
    &:focus,
    &:hover {
      outline: 0;
    }
  }

  input[disabled] {
    cursor: not-allowed;
  }

  .coin-input {
    padding: 0.75rem 0.75rem 0.75rem 1rem;

    button {
      border: none;
      background-color: transparent;
      font-weight: 600;
      font-size: 14px;
      line-height: 22px;
      border-radius: 4px;
      white-space: nowrap;
      cursor: pointer;

      &:active,
      &:focus,
      &:hover {
        outline: 0;
      }

      &:hover {
        background-color: @modal-header-bg;
      }
    }

    .max-button {
      height: 32px;
      padding: 0 16px;
      color: @primary-color;
    }

    .select-button {
      padding: 0.5rem;
      line-height: 24px;
      .select-token {
        background: @s-color;
        padding: 6px 12px;
        color: #fff;
        border-radius: 12px;
        font-size: 18px;
      }
      .anticon {
        margin-left: 4px;
        font-size: 8px;
      }

      img {
        height: 24px;
        width: 24px;
      }
    }
  }
}
</style>
